<template>
    <div class="app-container">

        <div class="page-header">
            <!-- <router-link class="back-link" to="/main/renshi/renshizhidu/yfrsyidong/yfrsyidong">
                <i class="el-icon-arrow-left"></i>
                返回
            </router-link> -->

            <div class="left-buttons">
                <el-button type="primary" icon="el-icon-back" @click="goBack">返回</el-button>
            </div>&emsp;
            <h2>人事档案 借出/调阅 申请表列表</h2>
        </div>
        <!-- 搜索区域 -->
        <div class="filter-container">
            <div class="right-buttons">
                <el-input v-model="listQuery.applicantName" placeholder="被申请人姓名" style="width: 200px;"
                    class="filter-item" @keyup.enter.native="handleFilter" />
                <el-input v-model="listQuery.applicantEmployeeNumber" placeholder="被申请人工号" style="width: 200px;"
                    class="filter-item" @keyup.enter.native="handleFilter" />
                <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                    搜索
                </el-button>
                <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">
                    新增
                </el-button>
                <el-button class="filter-item" type="danger" icon="el-icon-delete" @click="handleBatchDelete">
                    批量删除
                </el-button>
            </div>
        </div>

        <!-- 表格区域 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="被申请人姓名" min-width="120">
                <template slot-scope="{row}">
                    {{ row.applicantName || row.applicantName2 || row.applicantName3 }}
                </template>
            </el-table-column>
            <el-table-column label="被申请人工号" min-width="120">
                <template slot-scope="{row}">
                    {{ row.applicantEmployeeNumber || row.applicantEmployeeNumber2 || row.applicantEmployeeNumber3 }}
                </template>
            </el-table-column>
            <el-table-column label="申请人姓名" prop="requesterName" min-width="120" />
            <el-table-column label="申请类型" min-width="100">
                <template slot-scope="{row}">
                    {{ row.borrowType === 1 ? '借出' : '调阅' }}
                </template>
            </el-table-column>
            <el-table-column label="申请日期" min-width="120">
                <template slot-scope="{row}">
                    {{ row.borrowType === 1 ? row.applyBorrowDate : row.applyReviewDate }}
                </template>
            </el-table-column>
            <el-table-column label="状态" min-width="100">
                <template slot-scope="{row}">
                    <el-tag :type="getStatusType(row)">{{ getStatusText(row) }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" min-width="230">
                <template slot-scope="{row}">
                    <el-button type="primary" size="mini" @click="handleView(row)">
                        查看
                    </el-button>
                    <el-button type="success" size="mini" @click="handleUpdate(row)">
                        编辑
                    </el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size"
            @pagination="getList" />
    </div>
</template>

<script>
import { getArchiveBorrowPage, deleteArchiveBorrow, batchDeleteArchiveBorrow } from '@/api/archiveBorrow'
import Pagination from '@/components/Pagination'

export default {
    name: 'ArchiveBorrowList',
    components: { Pagination },
    data() {
        return {
            list: null,
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                size: 10,
                applicantName: undefined,
                applicantEmployeeNumber: undefined
            },
            selectedRows: []
        }
    },
    created() {
        this.getList()
    },
    methods: {
        goBack() {
            this.$router.push('/main/renshi/renshizhidu/rsdajiechu/rsdajiechu')
        },
        getList() {
            this.listLoading = true
            getArchiveBorrowPage(this.listQuery).then(response => {
                this.list = response.data.data.records
                this.total = response.data.data.total
                this.listLoading = false
            })
        },
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
        },
        handleCreate() {
            this.$router.push({
                path: '/main/renshi/renshizhidu/rsdajiechu/rsdajiechu',
                query: { type: 'create' }
            })
        },
        handleView(row) {
            this.$router.push({
                path: '/main/renshi/renshizhidu/rsdajiechu/rsdajiechu',
                query: { type: 'view', id: row.id }
            })
        },
        handleUpdate(row) {
            this.$router.push({
                path: '/main/renshi/renshizhidu/rsdajiechu/rsdajiechu',
                query: { type: 'edit', id: row.id }
            })
        },
        handleDelete(row) {
            this.$confirm('确认删除该记录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteArchiveBorrow(row.id).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.getList()
                })
            })
        },
        handleSelectionChange(val) {
            this.selectedRows = val
        },
        handleBatchDelete() {
            if (this.selectedRows.length === 0) {
                this.$message({
                    message: '请选择要删除的记录',
                    type: 'warning'
                })
                return
            }
            this.$confirm('确认删除选中的记录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const ids = this.selectedRows.map(row => row.id)
                batchDeleteArchiveBorrow(ids).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.getList()
                })
            })
        },
        getStatusType(row) {
            if (row.borrowType === 1) {
                if (row.actualReturnDate) return 'success'
                if (row.actualBorrowDate) return 'warning'
                return 'info'
            } else {
                if (row.actualReviewDate) return 'success'
                return 'info'
            }
        },
        getStatusText(row) {
            if (row.borrowType === 1) {
                if (row.actualReturnDate) return '已归还'
                if (row.actualBorrowDate) return '借出中'
                return '待处理'
            } else {
                if (row.actualReviewDate) return '已调阅'
                return '待调阅'
            }
        }
    }
}
</script>

<style scoped>
.app-container {
    /* 容器样式 */
    padding: 20px;
    /* background-color: #f5f7fa; */
    border-radius: 8px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    min-height: calc(100vh - 40px);
    width: 1200px;
    margin: 0 auto;
}

/* 页面头部样式 */
.page-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 3px 15px;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 返回链接样式 */
.back-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #409EFF;
    font-size: 16px;
    margin-right: 20px;
    transition: all 0.3s;
}

.back-link i {
    margin-right: 5px;
}

.back-link:hover {
    opacity: 0.8;
}

/* 标题样式 */
.page-header h2 {
    margin: 0;
    font-size: 1.2em;
    font-weight: 500;
    color: #303133;
}

.filter-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    align-items: center;
}

.filter-item {
    margin-right: 10px;
}

.right-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.left-buttons {
    display: flex;
    align-items: center;
}
</style>